Healthy skepticism is often the best way to glean the value of what’s being presented—challenge it; prove it wrong, if you can. That creates engagement, which is the key to understanding.
—David Allen, Getting Things Done
What are anti-patterns?
A named “solution” or approach describing what the anti-pattern does, including the symptoms, where there are more bad consequences than good.
A tempting reason why you might be seduced into using the anti-pattern, including the user problem it sought to address.
Some missing context for when it could have been viable. This usually suggests alternative, suitable UI patterns.
Some recovery steps explaining how to recover, including alternative patterns that exist and are successful. Sometimes, there are preventative measures too.
Let’s look at an example. Mystery meat navigation describes links that do not have a clear destination. The user needs to hover over the link to reveal the link’s destination or follow it blindly, making your product harder to understand and operate. Like mystery meat—processed meats with unidentified sources—mystery meat navigation is clear to the creator but not to the consumer.
A common example of mystery meat navigation is the infamous “click here” link. These poorly labeled links are confusing when read out of context, for example, by a screen reader or someone scanning a page quickly for specific information. The user is forced to hover over or touch and hold the link for the browser to show the link target, and even then, a URL doesn’t explain the content of the link target. Another example of mystery meat navigation is unlabeled icons. The symptoms of mystery meat navigation include decreased click confidence, wayfinding challenges, longer task completion times, and potentially abandonment.
Anti-pattern names typically take on a more humorous or memorable name to call out the absurdity of using it and draw attention to its flaws. Otherwise you might (reasonably) refer to mystery meat navigation links as “click here” links, hiding their nefarious nature. By having a sharper name, you can recognize its true nature.
When crafting link text, it might be tempting to use “click here” because it’s a common staple of the early Web and it’s explicit about what you want the user to do next. It’s especially tempting when you start a sentence with “To learn more”: “To learn more about bees, click here.” Instead, you could link the subject itself, for example, “Learn more about bees.”
Similarly, it might be tempting to use unlabeled icons to save space, reduce visual clutter, and avoid translating text. One time when it might be worth keeping the unlabeled icons is when you have extremely experienced, highly engaged users using a limited number of unlabeled icons with high frequency. For example, a Facebook user that checks in every day may not need labels for the primary navigation items they use habitually. Instead of unlabeled icons, you might add labels to icons or replace them with text alone.
Why care about anti-patterns?
Learning anti-patterns helps you recognize them more quickly and learn how to untangle yourself from one that’s already in use. When uncovering anti-patterns, it’s useful to assume positive intent by the designer using the anti-pattern in attempting to solve their problem. It’s rare that people set out to create impenetrable user interfaces and anti-patterns can be deceptively appealing.
The approach is useful in the short term but will have negative consequences in the long term. The long-term consequences might seem acceptable or be overlooked.
The approach might be intended as a stop-gap solution, but lingers for unexpected reasons, such as the development team being out sick delaying additional work.
The solution would be suitable in a slightly different context, but it’s been mismatched to the situation at hand.
There are other forces at play outside of the design problem, such as management issues (like the mythical man month we saw earlier).
Patterns may also suggest shortcomings in your environment like the technology available. For example, displaying a login form might be unnecessary in an iOS app that uses a thumb print to authenticate a known user. The thumb print authentication makes the username and password fields of a login form redundant. Without thumb print access, however, the login form pattern would be suitable.
Uncovering the failure mode of an anti-pattern helps in understanding why interfaces fail and may assist in seeing problems in advance when new design trends come around.
Note
UI anti-patterns aren’t just bad UI design. Unlike poor UI choice, anti-patterns seem like good solutions on the surface. Further, the scope of the problem in an anti-pattern is often larger than just the UI: the root cause of an anti-pattern might be the governance and business processes that surround how a web site component is updated. UI anti-patterns develop from a combination of people, parts, and processes.
Even when a bad pattern falls out of favor (owing to its many drawbacks), that doesn’t mean it’s never the right solution; only that the odds are lower. Even a good UI pattern can become an anti-pattern if its solution depends on a specific context, like an era of web design, conventions, and technology, and it’s misapplied to a new and different context.
Anti-pattern: Hamburger basement
As a UI pattern, this was originally called the hamburger menu: three lines indicating a “hamburger” button in the top-left or top-right corner of an interface that opened and closed a menu, usually containing links to different parts of a product.
Giving it a more ridiculous name that highlights the flaws of it, the hamburger basement anti-pattern stashes options away behind the hamburger button leading to fewer people using them.
Screenshot of Wikipedia’s article about the hamburger button on a page with a hamburger button
Decreased discoverability: It’s harder for users to stumble upon other great features in your product.
Decreased location signalling: Users will find it harder to identify where they are if you remove another source of you-are-here navigation.1
Increased cost of interaction: The menu requires an additional tap to access it compared to immediately accessible links.
Increased thumb stretching: Hamburger menu icons are kept in the hardest-to-reach locations on tiny screens for your users’ thumbs.
A form of mystery meat navigation: Users won’t know what’s in the menu behind the icon until they tap it.
Increased analysis paralysis: A long list of links in the menu with little context about their destinations makes it hard to select an item. If the user chooses the wrong link, they need to start the time-consuming process of trial-and-error tapping each link behind the hamburger button again.
Decreased click confidence: Users hesitate with unlabeled icons.
Increased context switching: It can be unclear where the menu came from and how it relates to the current page, especially if it appears suddenly without a transition.
Increased confusion across platforms: Users don’t understand or recognize the hamburger at all on desktop web sites and might find the icon in unusual locations on native iOS apps where the platform reserves the top-left corner for existing navigation elements like “back” arrows or “exit” crosses. In this case, the solution used doesn’t fit the context.
As it turns out, hidden navigation cuts discoverability in half and destroys engagement.2 Beyond the hamburger basement, this gives us clues about what to look for in the future when new “patterns” arise that turn out to be anti-patterns. If you see hidden navigation elements leading to poor navigation within your product, you will be able to recognize this familiar trap and nip it in the bud.
Only keep secondary navigation elements or infrequently accessed features in the hamburger menu, such as about pages, history, settings, permissions, copyright, privacy policies, sponsorship, advertising, affiliates, disclaimers, cookie policies, licensing, help, security, terms, and so on.
For secondary navigation elements included in a hamburger menu, examine the information architecture of your navigation menu to establish clear labels, categories, and order to your links.
Extract primary navigation elements from the hamburger menu and expose them in the main interface instead of hidden behind a click. For this you might use, for example, a bottom tab nav bar with the current nav item clearly selected.
Move the menu button to a thumb-friendly region.
Aggressively prioritize content so that primary navigation is correctly identified and easily accessible. The hamburger basement can be a clue that you’ve failed to prioritize as aggressively as possible.
Increase clickability signifiers like surrounding the hamburger icon with a border to look like a button or giving it a “menu” label.
Label your icons.
Avoid use on desktop.
Increase content links.
Screenshot of Thick studio using a fixed “Menu” button in the thumb zone
These steps don’t necessarily mean you will completely kill off the hamburger menu, only that you can make it less of a dank, scary basement by mitigating some of the worst effects of it.
What else can we learn from the hamburger basement anti-pattern? In the hamburger basement, we can see some of the basic tenets of UX violated. When considering new UI patterns, we must be on the look out to identify the trade-offs we’re making when we employ them. Given how undiscoverable the hamburger menu is, what makes us think sideways scrolling nav will be any better?
Screenshot of Designer News where tapping the hamburger button reveals a sideways scrolling nav bar
Similar to the hamburger menu pattern and hamburger basement anti-pattern, the overflow menu3 has been branded a junk drawer.4 This example shows us a similar tempting reasons to use a “solution” that brings more bad consequences than good when used in a context that doesn’t fit.
What are dark patterns?
Another way that UI design can go awry is through the use of dark patterns or evil design (sometimes referred to as “black hat UX”): deceptive patterns that benefit the creator more than the user. They often persuade users into performing an action they didn’t intend, such as subscribing to a long contract with hidden fees. Sometimes they dissuade people from performing their intended action, such as unsubscribing. Commonly, the use of dark patterns is seen as being in pursuit of the bottom line—getting the sale no matter the cost to the user.
Design, by its nature, is used to communicate with and persuade people. Dark patterns, however, deceive people to achieve that goal.
Note
To learn more about dark patterns and the gray area, check out:
Dark Patterns ( https://darkpatterns.org/ )
Evil By Design ( http://evilbydesign.info/ )
Manipulinks and Confirmshamers
A manipulink is a link with manipulative link text. The term combines “manipulative” and “link.” Unlike links with well-crafted microcopy that is precise and concrete, manipulinks make users feel bad by forcing them to click a link with irrelevant text to actual the task: dismissing a notification or modal (they usually replace “cancel,” “close,” or “dismiss” as link text).
The irrelevant link text requires the users to make an identity statement about their values aligning with some negative quality like, “No thanks, I prefer not making money,” “No, I prefer paying full price,” or “No thanks, I don’t like cute babies.”5
Screenshot of Gmail’s dismissal link microcopy that says, “I don’t want smarter email”
“declineshamers” because they’re often used to decline an offer
“confirmshamers” as they ask users to confirm something potentially shameful about themselves to remove the obstacle
“painful buttons” to make the opt-out button less passive and more painful to users
If the organization identifies a user as a shopper needing further incentive to make a decision, they may offer the user a discount on their purchase or use principles like scarcity and urgency to push the user over the line (“Only 5 items left!”, “Offer ends in 3 days!”).
If the organization identifies the user as needing more information, they then attempt to offer more assistance such as live chat with customer support to address their concerns, particularly on e-commerce checkout pages.
Failing all of that, the organization may settle for lead generation and attempt to capture your email address or social media accounts to market to you more later.
Before the user can leave, however, they must click a negatively worded link on that pop-up.
On the surface, manipulinks might seem like an effective use of compelling microcopy to increase conversions. As Kate Meyer and Kim Flaherty at Nielsen Norman Group point out, however, the short-term increase in leads might not be worth the long-term impact of lower Net Promoter Scores, negative brand perception, and loss of credibility and users’ trust.6
As a label for a control, these manipulinks even fail at the basic task of describing what clicking the link will do: will it dismiss the modal or automatically email all my contacts that I prefer dumb email? The link text gives no clue about its actual behavior. Using this link text alone, a user with an assistive device like a screen reader may find it challenging to figure out how to operate the modal, to close it and return to their original task.
Beyond the bottom line, this dark pattern risks putting words in someone’s mouth, encouraging negative self-talk that can affect mental health.7
To wind your way back from a manipulink, you might consider Copyhackers’ opt-out boxes with consequences.8 In addition to including a subscribe button in a newsletter signup pattern as we saw in Chapter 2, Copyhackers suggest using an explicit opt-out link so users make a conscious decision to accept the consequences of opting out rather than deferring or delaying the decision by dismissing the question. By using the phrase “No, I reject the persuasion guide,” they are offering their users a clearly expressed action that accurately describes what the user is doing.
Tip
There’s a whole Tumblr about confirmshaming ( http://confirmshaming.tumblr.com/ ).
Design smells
A bad smell or a code smell is a term commonly used in the software development community to describe symptoms in a product that possibly indicate a deeper problem. To borrow the concept, design smells are design issues that possibly indicate a deeper problem. You might think of them as the smoke you see before you spot the fire. If you don’t find the fire and put it out in time, your whole product might go up in flames. On the other hand, while design smells might indicate a deeper problem, they might also be traced back to nothing sinister at all. Your smoke might come from a smoke machine, having exactly the intended effect.
When you see a design smell, it’s useful to understand it to avoid growing problems in the future. It might be the source of accumulating design debt: borrowing against the future to quickly solve a problem now. For example, rolling out a new look and feel to key parts of a product to get it in the hands of users faster, with the intention to finish cleaning up the stragglers later. After a dozen such short-term decisions, the product could start to look like a Frankenstein monster. The problem here is that the longer it takes to start paying off design debt, the more costly and difficult it is to handle. This risk of design debt needs to be balanced against the need to iteratively deliver value to users. Design smells can help you identify when you’re starting to take on too much design debt.
Too Much Information (TMI)
Screenshot of Chrome’s Developer Tools with an extraordinary number of settings for their power users
Screenshot of autocomplete dev tools
Screenshot of pagination with hundreds and thousands of pages probably doesn’t lead to relevant content
Screenshot of Google’s pagination only shows 10 pages
Screenshot of Google’s pagination has more than 10 pages
Modals and pop-ups
Modal UI pattern
A modal (or “modal window,” “dialog,” “overlay,” or “lightbox,” sometimes described as a “pop-up”) is an overlay that places the system in another mode, temporarily displaying different content.
Screenshot of Google’s lightbox content modal that tells you more about specific items
Screenshot of a property modal to edit profile settings in Asana
If there is a destructive action in the modal (e.g., it’s a confirmation modal for deleting content) and the destructive action cannot be undone easily, it is safer to make the default “Enter” key action a cancellation option.
Screenshot of LinkedIn shows a functional modal to configure your invitation before sending it
You can use a modal when you need to change the flow of content or interaction. While a common staple of the Internet, modals often cause more problems than they solve and need to be handled carefully, lest they become an anti-pattern.
Screenshot of Asana’s bulletin modal advertising a new feature in a premium product
Modal design smell
The primary purpose of a modal—disrupting the flow to temporarily change mode—suggests that there’s a deeper root cause underlying what’s wrong with the UI. Why would you need to disrupt the flow? The existing flow must be somehow insufficient to the task at hand. It is, however, only a smell; a modal might be the best option for the context.
Pop-up anti-pattern
Modals are occasionally referred to as pop-ups. The original “pop-ups,” however, used specific browser behavior to intrusively pop up without any warning and are typically blocked in modern browsers. As an exaggerated, evil-twin anti-pattern name for modals though, “pop-ups” is suitable enough: they often pop up to a user’s great annoyance.
The problem the pop-up is trying to solve is how to draw a user’s attention to a Call To Action. This happens a lot on web sites with a strong content marketing focus. That is, they draw people in with their “free” content, then “ask” for something else, like a newsletter subscription to generate leads or signup to a subscription service for monthly sales. As such, including this Call To Action beside or after the content might not give it enough attention.
Unless particular care is taken and testing performed, pop-ups are frequently highly confusing and difficult to operate for people using keyboards, screen readers, or assistive devices.
On smaller screens such as a mobile phone, pop-ups disrupt the flow completely by covering the entire screen. In this case, it would make more sense to defer the content to a subsequent page. If there is so little content in the pop-up that it has room to spare, then a pop-up is overkill and might be replaced with inline content (under a collapsible, disclosure element, for example).
When system-generated rather than user-initiated, pop-ups are highly disruptive, working against user expectations. Some folk use proxies for determining the user’s intent like moving the mouse cursor to the close tab button to indicate intention to leave. When the “intent” is not captured properly, the disruptive effect of the intrusion is aggravated. For example, scrolling down is no guarantee that a user has read the article and now wants to share it. Finally, these pop-ups obscure the content the user actually intended to read.
Thanks to habituation, many people dismiss pop-ups instinctively without considering their content.
Scrollable pop-ups are difficult to navigate. For example, on a mobile device if a pop-up has a large margin around it, there might be only a small touchable area for scrolling. To scroll within the pop-up, the user might accidentally dismiss it or click a button inside it.
Zooming in on images in lightbox pop-ups can do weird, unexpected things, distorting the UI and obscuring the image.
“Mode errors” occur when the user is not in the mode they expect, leading them to go down the wrong path. For example, you’re typing away writing your password into a login form when a newsletter signup form appears, causing you to type your password into that field instead.
Cascading pop-ups—one over the top of the other—disrupt the user even further from their original task, clutter the interface, and are difficult to manage.
Screenshot of Asana’s cascading pop-ups, leading away from the main page
Immediately present actions inline (e.g., display a button group instead of a modal with options).
Display content inline (e.g., expand a collapsible “disclosure” element to house the new content).
Defer the content completely to another page.
Use tooltips (that respond to positioning near screen edges, otherwise you’ll still have issues on tiny screens).
Use one of the notifications we saw in Chapter 2, like the snackbars, toasts, or page-wide fixed notification bars.
Always avoid stealing focus. If a user is typing elsewhere, they probably don’t mean to be typing in your pop-up.
Let the user initiate the modal on demand (practicing progressive disclosure).
Provide easy exits like hitting the escape key, clicking on the overlay, and a well-labeled “Close” link.
Make it accessible. At a minimum, you probably want role="dialog", aria-labelledby, and aria-describedby attributes, as well as using JavaScript to move focus to the modal when the user triggers it and restore focus after it’s dismissed.10
Ensure relevant content is still in view.
Screenshot of Asana using a scrollable modal
Note
Tab closed; didn’t read ( http://tabcloseddidntread.com/ ) is a gallery site calling out organizations that obscure content and provides browser extensions to people to streamline the process of tweeting at organizations to express discontent. This says something about how much frustration pop-ups can cause to some people.
“Overall pattern” design smell
When creating or documenting patterns in a design system, if you see an overall pattern or a “parent pattern,” that’s a design smell. Using our modal pattern as an example, modals are sometimes categorized into different types, such as “property, function, process, and bulletin” dialog boxes as described in About Face by Alan Cooper.11 These can be useful and meaningful distinctions. As they appear in a design system, however, this categorization might not be meaningful to an engineer implementing them if they’re all styled the same and have the same interactions and behaviors. Bundling different patterns under one overall pattern is a smell.
In the world of software patterns, Martin Fowler suggests “that you often have choices between turning two related concepts into separate patterns, or combining them as variations of a single pattern” and that “if you do split them, don’t try to have an overall pattern too.” While this risks some duplicated documentation across each variant, you avoid the challenges of an overall pattern being stretched ineffectively to serve too many purposes.12
You might be better off splitting similar concepts into named variants like a “benefits modal”13 without a mutual parent. If that doesn’t make sense for your situation, the other possible problem from this design smell is that the variations are too small and not meaningful, which suggests that you have an undesirable inconsistency in your product. Instead of a parent “modal” pattern and a few children variation modal patterns, you might need to consolidate the differences into one modal, producing a more consistent and predictable experience for end users as well as designers and developers navigating your design system. Alternatively, what you might be looking at is actually different options and states for a single modal. One modal pattern might be executed in a component with options for positive information styling vs. warning styling for destructive actions, but the pattern stays the same.
The lifetime of a bad pattern
While anti-patterns and dark patterns tend to prioritize short-term gain or superficial wins, within a few years it becomes evident to both consumers and the design community that a pattern is not worth it and it falls out of fashion. Consumers become savvier about the negative impact dark patterns have on them and revolt. They vote with their dollars by switching to products that are easier to use and more trustworthy, so businesses scramble to adapt and strive for creating positive user experiences as a competitive advantage. Designers start to see the long-term costs of the seemingly useful solutions, and so stop using these patterns in new projects. UI design patterns usually have a clear visual component to help people recognize them and have measurable impact on usability in UX metrics like engagement that give visibility to the drawbacks of anti-patterns over time.
As each new dark pattern arises, governments start to ban them, corporations start to penalize them, and legal action can be brought against them. For example, an EU consumer directive outlaws “Sneak into Basket” opt-out add-on purchases, among other dark patterns.14 Similarly, Google penalizes intrusive interstitial ads15 and LinkedIn settled a $13M class-action law suit for spamming friends of users.16
In the future, we’ll see fewer and fewer!